<!DOCTYPE HTML>
<html lang="zh" style="font-size:100px">

<head>
    <meta charset="utf-8" />
    <title>2018年上半年飞过的地方 - Hello全视界</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="../lib/three.js"></script>
    <!-- <script src="../lib/vue.js"></script> -->
    <script src="../control_stick/util.js"></script>
    <script src="../control_stick/stick.js"></script>
    <style>
        html,
        body,
        #app {
            padding: 0;
            margin: 0;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            min-height: 100vh;
        }

        body {
            font-family: sans-serif;
            line-height: 1em;
            font-size: 0.16rem;
        }

        button {
            font-size: 0.16rem;
            font-family: sans-serif;
        }

        div {
            box-sizing: border-box;
        }

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0
        }

        p {
            margin: 0;
        }

        #app {
            position: relative;
        }

        .logo {
            position: absolute;
            margin: 0.2rem 0 0 0.4rem;
            z-index: 999;

        }

        .logo>img {
            width: 2rem;
        }

        .panoWrap {
            position: absolute;
            overflow: hidden;
            cursor: -webkit-grab;
        }

        .panoWrap:active {
            cursor: -webkit-grabbing;
        }

        .panoControls {
            position: absolute;
            display: flex;
            justify-content: flex-end;
            /* width: 100%; */
            align-items: center;
            top: -0.6rem;
            padding: 0 0.2rem;
            right: 0px;
        }

        .panoControls>button,
        .panoControls>div,
        .panoControls>a,
        .panoControls>input {
            pointer-events: all;
        }

        button.holaGreen {
            background: #1c1c1c;
            border: #62d128 solid 2px;
            color: #62d128;
        }

        .panoControls button {
            padding: 0.1rem 0.2rem;
            display: block;
            margin: 0 10px
        }

        .panoPanelBottom button.rollOutBtn {
            position: absolute;
            height: 2em;
            top: -2em;
        }

        .panoPanelBottom {
            position: absolute;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 0;
            transition: 0.4s ease bottom;
            padding-top: 0.1rem;
        }

        .panoPanelBottom.fold {
            bottom: -1.6rem;
        }


        .panoList {
            width: 100%;
            height: 1.7rem;
        }

        .panoList>ul {
            display: flex;
            color: #fff;
            margin: 0 auto;
            margin-bottom: 1em;
        }

        .panoList>ul li {
            display: flex;
            flex-direction: column;
            color: #fff;
            justify-content: center;
            margin: 0 10px;
            align-items: center;
        }

        .panoList>ul li>img.panoThumb {
            width: 2rem;
            display: block;
            min-width: 2rem;
            flex-shrink: 0;
        }

        .panoList>ul li>p.panoTitle {
            line-height: 1.5em;
            text-align: center;
            flex-shrink: 0;
            display: block;
            word-break: keep-all;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .scrollBar {
            width: 2rem;
            position: absolute;
            display: flex;
            align-items: center;
            left: 20px;
        }

        .scrollBar>.stick {
            position: absolute;
            display: block;
            width: 0.2rem;
            height: 0.2rem;
            background-color: #62d128;
            border: #62d128 solid 2px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .scrollBar>.bar {
            width: 100%;
            display: block;
            height: 2px;
            background: #62d128;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="logo">
            <img src="../logo.svg" />
        </div>
        <div class="panoWrap"></div>
        <div class="panoPanelBottom" :class="{'fold':isPanoPanelBottomFold}">
            <button v-on:click="panoListRollToggle" class="rollOutBtn">展开收起</button>

            <div class="panoList">
                <ul>
                    <li v-for="(pano,index) in panos">
                        <img class="panoThumb" @click="panoChange(index)" :src="panoThumbPath+pano.imgThumb" />
                        <p class="panoTitle">{{pano.desc}}</p>
                    </li>
                </ul>
                <div class="scrollBar" data-role="miniScrollBar">
                    <span class="stick"></span>
                    <div class="bar"></div>
                </div>
            </div>

            <div class="panoControls">
                <!-- <button onclick="fullScreen" class="fullScreenBtn">全屏</button> -->
                <!-- <button onclick="vrHandler()" class="fullScreenBtn holaGreen">VR</button>
                <button onclick="panoShot()" class="fullScreenBtn holaGreen">保存全景</button> -->

                <button v-on:click="fullScreen" class="fullScreenBtn holaGreen">全屏</button>
                <!-- <button v-on:click="fullScreen" class="fullScreenBtn holaGreen">陀螺仪</button> -->

            </div>
        </div>
    </div>


    <script src="./pano_array.js"></script>
    <script src="./position2_array.js"></script>

    <script>
        'use strict';
        // Vue.component('scrollBar')

        //rem
        var rem = function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        };




        //请求全屏
        // var fullScreenStatus = false;
        // function fullScreen() {
        //     if (!fullScreenStatus) {
        //         document.body.requestFullscreen();
        //         fullScreenStatus = true
        //     } else {
        //         document.exitFullscreen();
        //         fullScreenStatus = false
        //     }
        // }

        // var panoApp = new Vue({
        //     el: '#app',
        //     data: {
        //         fullScreenStatus: document.fullscreenElement,
        //         isPanoPanelBottomFold: false,

        //         panos: panos,
        //         currentIndex: 0,

        //         //配置全景图文件夹基地址
        //         panoBasePath: threeStage.panoBasePath,
        //         panoThumbPath: threeStage.panoThumbPath,

        //         panoGeoCood: 0
        //     },
        //     methods: {
        //         mounted: function () {

        //         },

        //         panoListRollToggle: function () {
        //             if (this.isPanoPanelBottomFold) {
        //                 this.isPanoPanelBottomFold = false
        //             } else {
        //                 this.isPanoPanelBottomFold = true
        //             }

        //         },
        //         fullScreen: function () {
        //             if (!document.fullscreenElement) {
        //                 document.body.requestFullscreen();
        //             } else {
        //                 document.exitFullscreen();
        //             }
        //         },
        //         panoChange: function (listNum) {
        //             console.log(this.currentIndex + ' ' + listNum)

        //             panoImgTex = new THREE.TextureLoader().load(panoBasePath + panos[listNum].imgName,
        //                 function (e) {
        //                     e.image.src = panoBasePath + panos[listNum].imgName;
        //                     if (listNum == this.currentIndex) {
        //                         return
        //                     } else {
        //                         this.currentIndex = listNum;
        //                         panoImgTex.needsUpdate = true;
        //                         spriteGroup.children = [];//在切换之前把当前全景上所有的sprite poi清空

        //                         //切换之后，读取相关数据，将sprite加入场景

        //                         panoImgTex.dispose();
        //                         panoPhotoMaterial.map = e;
        //                         panoImgTex.anisotropy = 8;
        //                         panoImgTex.needsUpdate = false;
        //                     }
        //                 })
        //         }
        //     }
        // });

        //THREEJS场景部分
        class ThreeStage {
            constructor() {
                // this.bind(threeStage);
                var _this = this;
                console.log(this);

                //检测是否存在用户交互
                _this.userInteract = false;

                //配置全景图文件夹基地址
                _this.panoBasePath = "./pano_images/";
                _this.panoThumbPath = "./pano_thumb/";

                //存储全景图列表，未来通过Ajax来获得。
                //全景图列表中保存的经纬度：若来自用户的相机，在使用时应当首先接入百度地图来进行位置修正，返回百度地图中的坐标
                // _this.panosList=[];
                _this.panosList = panos;

                //存储百度地图地点列表，未来通过访问百度地图API来获得
                // _this.neighborList=[];
                _this.neighborList = positions;

                //当前全景图索引，未来试图通过Ajax来获得首次载入时的索引
                _this.currentIndex = 0;

                _this.sceneInit();
                _this.panoInit(_this.currentIndex);
            };

            sceneInit() {

                var scene = new THREE.Scene();

                //用于将scene暴露到全局
                window.scene = scene;

                //默认相机为位于原点的透视相机
                //fov,aspect,near,far
                var defaultCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
                defaultCamera.name = "defaultCamera";

                var cameraGroup = new THREE.Group();
                cameraGroup.name = "cameGroup"
                cameraGroup.add(defaultCamera);
                scene.add(cameraGroup);

                var renderer = new THREE.WebGLRenderer({
                    "antialias": true
                });

                //加光
                var light = new THREE.AmbientLight(0xffffff, 2);
                scene.add(light);

                //尝试将渲染尺寸乘以设备像素比，防止手机浏览器渲染时产生锯齿。
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setPixelRatio(window.devicePixelRatio);

                //将渲染器 - Canvas元素插入到DOM中
                var panoWrap = document.getElementById('app').querySelector('.panoWrap');
                panoWrap.appendChild(renderer.domElement);

                //摄像机目标
                var cameraTarget = new THREE.Object3D();
                cameraTarget.name = "cameraTarget";
                //第一个值为半径，第二个值为上下旋转角，第三个值为平面极坐标的旋转角
                var panoSphereRadius = 10;
                var targetSphereCood = new THREE.Spherical(panoSphereRadius, util.degToRad(225), 0);
                cameraTarget.position.setFromSpherical(targetSphereCood);

                scene.add(cameraTarget);



                this.scene = scene;
                this.camera = defaultCamera;
                this.cameraGroup = cameraGroup;
                this.renderer = renderer;
                this.panoWrap = panoWrap;
                this.light = light;
                this.cameraTarget = cameraTarget;

                this.targetSphereCood = targetSphereCood;

                console.log(this.targetSphereCood);

            };

            panoInit(panoIndex) {
                //全景球半径为10
                var panoGeometry = new THREE.SphereBufferGeometry(10, 36, 36);
                //直接将x设为-1，使得所有面朝向内测
                panoGeometry.scale(-1, 1, 1);

                //载入贴图
                var panoImgTex = new THREE.TextureLoader().load(this.panoBasePath + this.panosList[panoIndex].imgName);
                //设置该值以减缓球面贴图南北两极的锯齿现象
                panoImgTex.anisotropy = 8;

                var panoPhotoMaterial = new THREE.MeshStandardMaterial({
                    "map": panoImgTex,
                    "color": 0xffffff,
                });
                var panoSphere = new THREE.Mesh(panoGeometry, panoPhotoMaterial);
                this.scene.add(panoSphere);

                this.panoGeometry = panoGeometry;
                this.panoImgTex = panoImgTex;
                this.panoPhotoMaterial = panoPhotoMaterial;
                this.panoSphere = panoSphere;

                console.log(this.camera)

                this.renderer.render(this.scene, this.camera);

                this.panoRotationAnimate();
            };
            panoRotationAnimate() {
                //交互部分
                //判断是否存在用户交互
                console.log(this)
                if (!this.userInteract) {
                    console.log(this.targetSphereCood)
                    this.targetSphereCood.theta += util.degToRad(0.1);
                    this.cameraTarget.position.setFromSpherical(this.targetSphereCood);
                    this.camera.lookAt(this.cameraTarget.position);
                }

                this.renderer.render(this.scene, this.camera);

                //注意this指向，在定时器中this指向window
                requestAnimationFrame(this.panoRotationAnimate.bind(this));
            }






        }

        // setInterval(animate,100);




        // var userInteract = function()  { };
        // var pointHandler = function(e)  { };
        // var mouseScrollHandler = function(e)  { };
        // var rayCastHandler = function()  { };




        // //处理窗口大小变化的情况
        // window.onresize = function () {
        //     renderer.setSize(window.innerWidth, window.innerHeight);
        //     camera.aspect = window.innerWidth / window.innerHeight;
        //     camera.updateProjectionMatrix();
        // }






        // var spriteGroup2 = new THREE.Group();

        // var spriteGroup = new THREE.Group();
        // spriteGroup.name = "spriteGroup";
        // spriteGroup.scale.x = -1;
        // spriteGroup.scale.y = -1;
        // spriteGroup.rotation.y = util.degToRad(-90)
        // spriteGroup2.add(spriteGroup);

        // scene.add(spriteGroup2);



        // /*交互方式：
        // 改变全景照片的方向
        //     鼠标/触摸：在屏幕上上下滑动改变上下旋转角，左右滑动更改平面旋转角；
        //     设备朝向：移动设备改变摄像机目标的位置
        // 改变摄像机的FOV
        //     鼠标滚轮：向前放大，向后缩小
        // */
        // var lookAroundDeg = 0;





        // // document.addEventListener("deviceorientation",function(e){
        // //     console.log(e)
        // // },false)

        // var mouseData = {
        //     originX: 0,
        //     originY: 0,
        //     offsetX: 0,
        //     offsetY: 0,
        //     originTheta: 0,
        //     originPhi: 0
        // }
        // function pointHandler(e) {

        //     if (e.type.match('mouse') || e.type == 'click') {
        //         if (e.button != 0) {
        //             return;
        //         }
        //     }

        //     var evtType = e.type;

        //     // e.preventDefault();

        //     if (e.type.match('touch')) {
        //         console.log('触摸事件');
        //         e = e.touches[0];
        //     }

        //     switch (evtType) {
        //         case "touchstart":
        //         case "mousedown": {
        //             userInteract = true;
        //             //得到鼠标点击位置
        //             mouseData.originX = e.clientX;
        //             mouseData.originY = e.clientY;

        //             //
        //             mouseData.originTheta = sphereCood.theta;
        //             mouseData.originPhi = sphereCood.phi;
        //             //

        //             panoWrap.addEventListener("mousemove", pointHandler, false);
        //             panoWrap.addEventListener("mouseup", pointHandler, false);

        //             panoWrap.addEventListener("touchmove", pointHandler, false);
        //             panoWrap.addEventListener("touchend", pointHandler, false);

        //             break;
        //         }
        //         case "touchmove":
        //         case "mousemove": {
        //             if (userInteract) {

        //                 //鼠标移动时计算鼠标的偏移量
        //                 mouseData.offsetX = e.clientX - mouseData.originX;
        //                 mouseData.offsetY = e.clientY - mouseData.originY;

        //                 //
        //                 sphereCood.theta = mouseData.offsetX * 0.005 + mouseData.originTheta;
        //                 // console.log(util.radToDeg(sphereCood.phi))

        //                 var phi = mouseData.offsetY * 0.005 + mouseData.originPhi;
        //                 //限制上下俯仰角度，以防万向锁。来自THREEJS
        //                 sphereCood.phi = util.clamp(phi, util.degToRad(181), util.degToRad(359));

        //                 // console.log(sphereCood.theta + ' ' + sphereCood.phi)

        //                 cameraTarget.position.setFromSpherical(sphereCood);
        //                 camera.lookAt(cameraTarget.position);

        //             }
        //             break;
        //         }

        //         case "touchend":
        //         case "mouseup": {
        //             userInteract = false;

        //             document.removeEventListener("mouseup", pointHandler, false);
        //             document.removeEventListener("touchend", pointHandler, false);

        //             document.removeEventListener("mousemove", pointHandler, false);
        //             document.removeEventListener("touchmove", pointHandler, false);
        //             break;
        //         }
        //     }

        // }

        // function mouseScrollHandler(e) {
        //     console.log(e)
        // }

        // //全局阻止鼠标右键菜单
        // document.body.addEventListener('contextmenu', function (e) {
        //     e.preventDefault();
        // }, false);

        // panoWrap.addEventListener('touchstart', pointHandler, false);
        // panoWrap.addEventListener("mousedown", pointHandler, false);
        // panoWrap.addEventListener("mousewheel", mouseScrollHandler, false);


        // //光线投射部分
        // panoWrap.addEventListener('mousedown', rayCastHandler, false);
        // function rayCastHandler(event) {

        //     if (event.type.match('mouse') || event.type == 'click') {
        //         //如果按下的按键为鼠标左键则不进行光线投射
        //         if (event.button == 0) {
        //             return;
        //         }
        //     }

        //     var mouse = new THREE.Vector2();

        //     // console.log(event);

        //     raycaster = new THREE.Raycaster();

        //     event.preventDefault();

        //     //将浏览器坐标转换到Threejs坐标
        //     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        //     mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        //     raycaster.setFromCamera(mouse, camera);

        //     //一个数组，用于保存与射线相交叉的对象
        //     //数组下标按照物体远近来进行排序，下标越大越远
        //     var intersects = raycaster.intersectObjects(scene.children)

        //     //尝试把射线选中的除了全景球以外的元素删去
        //     //似乎可以用.filter(function(obj3d){return ...});来替换？
        //     var realIntersects = [];
        //     for (var i = 0; i < intersects.length; i++) {
        //         // console.log(intersects);
        //         if (intersects[i].object.geometry instanceof THREE.SphereBufferGeometry) {
        //             realIntersects.push(intersects[i]);
        //         }
        //     }
        //     // console.log(realIntersects);
        //     intersectPoint = realIntersects[0].point;

        //     console.log(intersectPoint);
        // }





        // //poiBoard生成器
        // var poiBoardGenerator = function (posName, posDistance) {
        //     var icon = new Image();
        //     icon.src = "";
        //     // icon.id="icon";
        //     // document.body.appendChild(icon);
        //     var canvas = document.createElement('canvas');
        //     canvas.width = 1024;
        //     canvas.height = 256;
        //     var ctx = canvas.getContext("2d");
        //     ctx.fillStyle = "rgba(0,0,0,0.75)";
        //     ctx.fillRect(0, 0, canvas.width, canvas.height);
        //     // ctx.fillRect(50, 60, 206, 206);
        //     icon.addEventListener('load', function (e) {
        //         ctx.drawImage(icon, 40, 40, 176, 176);
        //     });

        //     ctx.moveTo(256, 33);
        //     ctx.lineTo(256, 222);
        //     ctx.strokeStyle = "#00ce00";
        //     ctx.lineWidth = 7;
        //     ctx.stroke();

        //     ctx.fillStyle = "#ffffff";
        //     ctx.font = '54px sans-serif';

        //     if (posName.length > 12) {
        //         var posName = posName.slice(0, 12) + '...';
        //     }
        //     ctx.fillText(posName, 300, 110);

        //     ctx.fillStyle = "#ffffff";
        //     ctx.font = '36px sans-serif';
        //     ctx.fillText(posDistance, 300, 180);

        //     return canvas;
        // }

        // var poiSpriteGenerator = function (canvas) {

        //     //在所点击点随便添加一个物体
        //     var poiMap = new THREE.CanvasTexture(canvas);
        //     // poiMap.needsUpdate=false;
        //     //要使得poi板朝向摄像机，必须使用SpriteMaterial材质
        //     var poiMaterial = new THREE.SpriteMaterial({ map: poiMap, color: 0xffffff, transparent: true, depthTest: false });
        //     var poiObject = new THREE.Sprite(poiMaterial);
        //     poiObject.center = new THREE.Vector2(0, 0)
        //     var poiboardSize = [1024, 256];
        //     poiObject.scale.set(poiboardSize[0] * 0.001, poiboardSize[1] * 0.001, 1);

        //     return poiObject;

        // }

        // //计算poi与全景拍摄距离，并将得到的距离赋值给源对象
        // var calcPoi = function (coodA, coodB) {
        //     var poiInfo = {
        //         distance: util.geoLength(coodA, coodB),
        //         angle: util.geoAngle(coodA, coodB)
        //     };
        //     return poiInfo;
        // }


        // var originP = panos[panoApp.currentIndex].geoCood;
        // for (var i = 0; i < positions.length; i++) {
        //     positions[i].poiInfo = calcPoi(originP, positions[i].point);//算出poi与全景照片拍摄点的距离和角度
        //     var distanceText;
        //     if (positions[i].poiInfo.distance > 1000) {
        //         distanceText = (positions[i].poiInfo.distance / 1000).toFixed(1) + ' km';
        //     } else {
        //         distanceText = positions[i].poiInfo.distance.toFixed(0) + ' m';
        //     }

        //     //生成poiBoard
        //     var poiCanvas = poiBoardGenerator(positions[i].title, distanceText);
        //     //生成sprite
        //     var poiObj = poiSpriteGenerator(poiCanvas);
        //     console.log(poiObj);

        //     //有了角度、有了距离，算球坐标
        //     //俯仰角根据poi距离来确定，角度值在90~180之间
        //     console.log(positions[i].poiInfo.distance / 2000 * 180);
        //     var lengthVal = util.clamp(positions[i].poiInfo.distance / 2000 * panoSphereRadius, 0.2 * panoSphereRadius, panoSphereRadius * 0.3);//poi半径长度，poi越远值越大，但限制在给定范围内
        //     // var lengthVal=panoSphereRadius;//poi半径长度，poi越远值越大，但限制在给定范围内
        //     var pitchVal = util.degToRad(util.clamp(positions[i].poiInfo.distance / 2000 * 180 + util.rand(-20, 20), 75, 90));//poi球坐标的俯仰角，角度值在90~180之间。
        //     var azimuthVal = util.degToRad(positions[i].poiInfo.angle);//poi球坐标的方位角

        //     console.log(lengthVal)
        //     var poiSpherical = new THREE.Spherical(lengthVal, pitchVal, azimuthVal);

        //     var poiCood = new THREE.Vector3().setFromSpherical(poiSpherical);
        //     console.log(poiCood);
        //     poiObj.position.x = poiCood.x;
        //     poiObj.position.y = poiCood.y;
        //     poiObj.position.z = poiCood.z;

        //     spriteGroup.add(poiObj);

        // }

        // //VR按钮

        // var vrHandler = function () {

        //     //设置左眼右眼
        //     var rightCamera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight / 2, 0.1, 1000);
        //     var leftCamera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight / 2, 0.1, 1000);


        //     leftCamera.bounds = new THREE.Vector4(0, 0, 0.5, 1);
        //     rightCamera.bounds = new THREE.Vector4(0.5, 0, 0.5, 1);


        //     leftCamera.position.x = -5;
        //     rightCamera.position.x = 5;


        //     // rightCamera.lookAt(cameraTarget);
        //     // leftCamera.lookAt(cameraTarget);

        //     // rightCamera.bounds=new THREE.Vector4(window.innerWidth/2,window.innerHeight/2,window.innerWidth/2,window.innerHeight/2);

        //     var hmdGlasses = new THREE.ArrayCamera([leftCamera, rightCamera]);

        //     hmdGlasses.lookAt(cameraTarget);

        //     scene.add(hmdGlasses);

        //     camera = hmdGlasses;

        //     renderer.render(scene, camera);

        // }


        // //全景截图
        // var panoShot = function () {

        // }



    </script>
</body>

</html>